<template>

  <div class="dashboard-container">
    <div style="display: flex; flex-wrap: wrap; justify-content: space-between;height: 100%;">
      <ScreenTitle></ScreenTitle>
      <div style="width:25%;height: 90%;">
        <div style="height: 23%;" class="myChart">
          <span class="title-text">报警信息
            <!-- <el-date-picker v-model="value1" type="datetimerange"
                  style="width:10px;height:30px; margin-left:380px;" @change="test">
                </el-date-picker> -->
          </span>
          <img src="@/assets/images/divide.png" style="width: 100%;">
          <dv-scroll-board :config="alarmDataConfig" style="width:100%;height:85%" />
          <img src="../../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
        </div>
        <div class="myChart" style="height: 23%;">
          <span class="title-text">监测数据
            <!-- <el-date-picker v-model="value1" type="datetimerange"
                  style="width:10px;height:30px; margin-left:380px;" @change="test">
                </el-date-picker> -->
          </span>
          <img src="@/assets/images/divide.png" style="width: 100%;">
          <dv-scroll-board :config="variableDataConfig" style="width:100%;height:85%" />
          <img src="../../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
        </div>

        <div class="myChart" style="height: 23%;">
          <span class="title-text">报警占比
            <!-- <el-date-picker v-model="value1" type="datetimerange"
            style="width:10px;height:30px; margin-left:380px;" @change="test">
          </el-date-picker> -->
          </span>
          <img src="@/assets/images/divide.png" style="width: 100%;">
          <div id="main" style="width: 85%; height:85% "></div>
          <img src="../../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
        </div>
        <div class="myChart" style="height: 23%;">
          <span class="title-text">油品指标
            <!-- <el-date-picker v-model="value1" type="datetimerange"
            style="width:10px;height:30px;  margin-left:380px;" @change="test">
          </el-date-picker> -->
          </span>
          <img src="@/assets/images/divide.png" style="width: 100%;">
          <div id="main1" style="width: 85%; height:100% "></div>
          <img src="../../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
        </div>
      </div>
      <div style="width:50%;position: relative;height: 90%;">
        <div style="font-size: 20px;letter-spacing: 0.1vw;color: #fff;position: absolute;top:-1%;left:40%">{{ device.name }}</div>
        <div class="data-label">
          <img src="../../../assets/images/left-bottom.png" alt="" class="top-left-img">
          <span class="text">设备运行时长</span>
          <span class="data">{{ ((device.normalTime+device.alarmTime)/60).toFixed(2) }}h</span>
          <img src="../../../assets/images/left-bottom.png" alt="" class="bottom-right-img">
        </div>
        <div class="data-label" style="top: 10%;">
          <img src="../../../assets/images/left-bottom.png" alt="" class="top-left-img">
          <span class="text">安全监测时长</span>
          <span class="data">{{ (device.normalTime/60).toFixed(2) }}h</span>
          <img src="../../../assets/images/left-bottom.png" alt="" class="bottom-right-img">
        </div>
        <div class="data-label" style="top: 20%;">
          <img src="../../../assets/images/left-bottom.png" alt="" class="top-left-img">
          <span class="text">设备状态</span>
          <span class="data" :style="{color:device.onLine?(device.alarmCount>0?'red':'springgreen'):'grey'}">{{ device.onLine?(device.alarmCount>0?"报警":"正常"):"离线" }}</span>
          <img src="../../../assets/images/left-bottom.png" alt="" class="bottom-right-img">
        </div>
        <img :src="prefix + device.devicePic" style="width: 100%;top:10%;position: relative;">
      </div>
      <div style="width:25%;height: 90%;">
        <div class="myChart">
          <span class="title-text">介电常数</span>
          <div><img src="@/assets/images/divide.png" style="width: 100%; max-width: 100%; height: auto;"></div>
          <div id="main2" class="chart-size"></div>
          <img src="../../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
        </div>
        <div class="myChart">
          <span class="title-text">40°C粘度 </span>
          <div><img src="@/assets/images/divide.png" style="width: 100%; max-width: 100%; height: auto;"></div>
          <div id="main3" class="chart-size"></div>
          <img src="../../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
        </div>
        <div class="myChart">
          <span class="title-text">振动 </span>
          <div><img src="@/assets/images/divide.png" style="width: 100%; max-width: 100%; height: auto;"></div>
          <div id="main4" class="chart-size"></div>
          <img src="../../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
        </div>
        <div class="myChart">
          <span class="title-text">压力</span>
          <div><img src="@/assets/images/divide.png" style="width: 100%; max-width: 100%; height: auto;"></div>
          <div id="main5" class="chart-size"></div>
          <img src="../../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
        </div>
        <div class="myChart" style="margin-bottom: 0;">
          <span class="title-text">流量</span>
          <div><img src="@/assets/images/divide.png" style="width: 100%; max-width: 100%; height: auto;"></div>
          <div id="main6" class="chart-size"></div>
          <img src="../../../assets/images/left-bottom.png" alt="" style="position: absolute;left: 0;bottom: 0;">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listRecord } from "../../../api/oil/record";
import { getDevice, listDeviceAlarm } from "../../../api/oil/screenInfo";
import { listVariableData, getDetailVariable, getDeviceDataLast, exportDeviceData } from '../../../api/oil/device_data';
import { getDeviceByCode } from '../../../api/oil/device';
import * as echarts from 'echarts';
import DateTool from '../../../utils/DateTool';
import ScreenTitle from "../../dashboard/screenTitle.vue";
import { getVariable, listVariable } from "../../../api/oil/variable";
import { svrapi } from "../../../utils/request";
export default {
  name: "deviceDetails",
  components: {
    ScreenTitle
  },
  data() {
    return {
      prefix: '',
      device: {},
      value1: [],
      deviceCode: '',
      startTime: '',
      endTime: '',
      option:{
        tooltip: {
          trigger: 'axis',
          triggerOn: 'mousemove|click',
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value',
          splitLine:{
            lineStyle:{
              color:['#333'],
              type:'dashed'
            }
          }
        },
        grid: {
          top: '8%',
          bottom: '35%',
          left: '10%',
          right: '5%'
        },
        series: [
          {
            data: [],
            type: 'line',
            smooth: true,
            showSymbol: false
          }
        ]
      },
      loading: false,
      drawEchart2xData: [],
      drawEchart2yData: [],
      drawEchart3xData: [],
      drawEchart3yData: [],
      drawEchart4xData: [],
      drawEchart4yData: [],
      drawEchart5xData: [],
      drawEchart5yData: [],
      drawEchart6xData: [],
      drawEchart6yData: [],
      echartData1: {
        value: [0,0,0,0,0],
        name: '当日指标'
      },
      data1: [],
      recordList: [],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      checkedList: ["dielectricConstant"],
      config: { headerBGC: 'linear-gradient(to right, #33ccff 0%, #ff99cc 100%);', headerColor: '#fff', oddRowBGC: 'transparent', evenRowBGC: 'transparent', oddRowColor: '#fff', evenRowColor: '#fff' },
      alarmDataConfig: {},
      variableDataConfig: {},
      //存储所有监测指标数据
      variableList:[],
      timer: null,
    };
  },
  computed: {
  },
  created() {
    this.deviceCode = this.$route.query.code;
    this.getDevice();
    // this.getVariableData();
    this.getEchart1();
    this.prefix = svrapi; // 设置图片前缀
    this.getVariableList();
  },
  mounted() {
    this.initDefaultEchartsData();
    this.timer = setInterval(() => {
      this.getDevice();
      this.getEchart1();
      this.initDefaultEchartsData();
      this.getVariableList();
    }, 5 * 60 * 1000); // 每5分钟刷新一次数据
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    getDevice() {
      getDeviceByCode(this.deviceCode).then(response => {
        this.device = response.data;
        this.getList();
        this.drawEchart();
      });
    },
    getVariableList() {
      listVariable({pageSize:100}).then(response => {
        var variableList = response.rows;
        variableList.sort((a, b) => {
          return a.order - b.order;
        })//按照顺序排列
        this.variableList = variableList.slice(0, 12);
        this.setVariableData();
      });
    },
    setVariableData() {
      getDeviceDataLast(this.deviceCode).then(response => {
        var deviceData = response.data;
        // console.log(deviceData);
        this.variableList.forEach(item => {
          if(deviceData){
            item.value = deviceData[item.key]!=null?deviceData[item.key]:'--';
          }else{
            item.value = '--';
          }
        });
        var data = this.variableList.map(obj => [obj.name, obj.value, obj.unit,"正常"]);
        console.log(data);
        var option = { ...this.config };
        option.data = data;
        option.header = ['监测指标', '数值', '单位','数据状态'];
        option.columnWidth = [220, 100, 80,100];
        this.variableDataConfig = option;
      });
    },
    initDefaultEchartsData() {
      // 设置默认的时间范围，这里示例为最近一天，可根据实际需求调整
      const defaultStartTime = DateTool.dateToStr(new Date(new Date().getTime() - 24 * 60 * 60 * 1000));
      const defaultEndTime = DateTool.dateToStr(new Date());
      //const defaultStartTime = '2024-09-05 00:00:00';
      //const defaultEndTime = '2024-09-05 23:59:59';
      var queryData = { deviceCode: this.deviceCode, startTime: defaultStartTime, endTime: defaultEndTime };
      listVariableData(queryData).then(response => {
        var deviceData = response.data;
        console.log(deviceData);
        // 清空原有数据数组，避免数据重复添加
        this.drawEchart2xData = [];
        this.drawEchart2yData = [];
        this.drawEchart3xData = [];
        this.drawEchart3yData = [];
        this.drawEchart4xData = [];
        this.drawEchart4yData = [];
        this.drawEchart5xData = [];
        this.drawEchart5yData = [];
        this.drawEchart6xData = [];
        this.drawEchart6yData = [];

        deviceData.forEach((item, index) => {
          this.drawEchart2xData.push(item.timeStamp.split(' ')[1]);
          this.drawEchart2yData.push(item.dielectricConstant);
          this.drawEchart3xData.push(item.timeStamp.split(' ')[1]);
          this.drawEchart3yData.push(item.viscosity40C);
          this.drawEchart4xData.push(item.timeStamp.split(' ')[1]);
          this.drawEchart4yData.push(item.vibrate);
          this.drawEchart5xData.push(item.timeStamp.split(' ')[1]);
          this.drawEchart5yData.push(item.pressure);
          this.drawEchart6xData.push(item.timeStamp.split(' ')[1]);
          this.drawEchart6yData.push(item.flowVelocity);
        });

        // 在获取默认数据后，调用图表更新方法
        this.updateAllCharts();
      });
    },
    // 报警占比
    drawEchart() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      // var option = this.option1
      var option;
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: '35%',
          left: '76%',
          orient: 'vertical',
          textStyle: {
            color: 'white'
          }
        },
        series: [
          {
            name: '报警占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 0
            },
            label: {
              // show: true,
              position: 'outer',
              color: 'white',
            },
            labelLine: {
              length: 10,
              length2: 8,
            },
            emphasis: {
              label: {
                // show: true,
                fontSize: 18              }
            },
            data: [
              { value: this.device.alarmTime?this.device.alarmTime:0, name: '报警' },
              { value: this.device.normalTime?this.device.normalTime:0, name: '正常运转' },
            ]
          }
        ]
      };

      option && myChart.setOption(option);

    },

    drawEchart1() {
      var chartDom = document.getElementById('main1');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove|click',
        },
        // title: {
        //   text: 'Basic Radar Chart'
        // },
        legend: {
          top: '35%',
          left: '76%',
          orient: 'vertical',
          textStyle: {
            color: 'white'
          },
          data: ['理想指标', '当日指标']
        },
        grid: {
          top: '40%',
          bottom: '5%',
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '温度', max: 50 },
            { name: '密度', max: 900 },
            { name: '含水量', max: 100 },
            { name: '饱和度', max: 1 },
            { name: '40°C粘度', max: 160 },
            // { name: '介电系数', max: 25000 }
          ],
          radius: '60%',
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [50, 900, 100, 1, 160],
                name: '理想指标'
              },
              this.echartData1
            ]
          }
        ]
      };
      option && myChart.setOption(option);

    },
    updateAllCharts() {
      // 介电常数图表更新
      this.updateEchart2();
      // 40度粘度图表更新
      this.updateEchart3();
      // 振动图表更新
      this.updateEchart4();
      // 压力图表更新
      this.updateEchart5();
      // 流量图表更新
      this.updateEchart6();
    },

    updateEchart2() {
      var chartDom = document.getElementById('main2');
      var myChart = echarts.getInstanceByDom(chartDom);
      if (myChart) {
        myChart.dispose();
      }
      myChart = echarts.init(chartDom);
      var option = _.cloneDeep(this.option);
      option.xAxis.data = this.drawEchart2xData;
      option.series[0].data = this.drawEchart2yData;
      myChart.setOption(option);
    },

    updateEchart3() {
      var chartDom = document.getElementById('main3');
      var myChart = echarts.getInstanceByDom(chartDom);
      if (myChart) {
        myChart.dispose();
      }
      myChart = echarts.init(chartDom);
      var option = _.cloneDeep(this.option);
      option.xAxis.data = this.drawEchart3xData;
      option.series[0].data = this.drawEchart3yData;
      myChart.setOption(option);
    },

    updateEchart4() {
      var chartDom = document.getElementById('main4');
      var myChart = echarts.getInstanceByDom(chartDom);
      if (myChart) {
        myChart.dispose();
      }
      myChart = echarts.init(chartDom);
      var option = _.cloneDeep(this.option);
      option.xAxis.data = this.drawEchart4xData;
      option.series[0].data = this.drawEchart4yData;
      option.series[0].itemStyle = {
        color: 'yellow'
      };
      myChart.setOption(option);
    },

    updateEchart5() {
      var chartDom = document.getElementById('main5');
      var myChart = echarts.getInstanceByDom(chartDom);
      if (myChart) {
        myChart.dispose();
      }
      myChart = echarts.init(chartDom);
      var option = _.cloneDeep(this.option);
      option.xAxis.data = this.drawEchart5xData;
      option.series[0].data = this.drawEchart5yData;
      option.series[0].itemStyle = {
        color: 'yellow'
      };
      myChart.setOption(option);
    },

    updateEchart6() {
      var chartDom = document.getElementById('main6');
      var myChart = echarts.getInstanceByDom(chartDom);
      if (myChart) {
        myChart.dispose();
      }
      myChart = echarts.init(chartDom);
      var option = _.cloneDeep(this.option);
      option.xAxis.data = this.drawEchart6xData;
      option.series[0].data = this.drawEchart6yData;
      option.series[0].itemStyle = {
        color: 'yellow'
      };
      option.series[0].barWidth = '60%';
      option.series[0].type = 'bar';
      myChart.setOption(option);
    },

    getList() {
      var query = {
        pageNum: 1,
        pageSize: 10,
        deviceId: this.device.id
      };
      listRecord(query).then((response) => {
        this.recordList = response.rows;
        var data = this.recordList.map(obj => [obj.deviceName, obj.message, obj.createTime]);
        var option = { ...this.config };
        option.data = data;
        option.header = ['设备名称', '报警原因', '报警时间'];
        option.columnWidth = [180, 180, 200];
        this.alarmDataConfig = option;
      });
    },

    getEchart1() {
      getDeviceDataLast(this.deviceCode).then(response => {
        var deviceData = response.data;
        if(deviceData){
        this.data1[0] = deviceData.temperature?deviceData.temperature.toFixed(2):0;
        this.data1[1] = deviceData.density?deviceData.density.toFixed(2):0;
        this.data1[2] = deviceData.microWater?deviceData.microWater.toFixed(2):0;
        this.data1[3] = deviceData.waterActivity?deviceData.waterActivity.toFixed(2):0;
        this.data1[4] = deviceData.viscosity40C?deviceData.viscosity40C.toFixed(2):0;
        this.echartData1.value = this.data1;
        }
        console.log(this.echartData1);
        this.drawEchart1();
      })
    }
  }

}
</script>
<style>
.dashboard-container {
  margin-top: -1px;
  padding: 0px;
  background-image: url("../../../assets/images/container-background.png");
  height: 100%;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.myChart {
  background: linear-gradient(135deg, rgb(0, 23, 59, 0.5), rgb(0, 13, 39, 0.5));
  position: relative;
  margin-bottom: 3.5%;
  height: 18%;
}

.myChart .title-text {
  color: azure;
  font-size: 16px;
  font-style: italic;
  letter-spacing: 0.1vw;
  margin-left: 10%;
}

.data-label {
  position: absolute;
  width: 20%;
  height: 8%;
  background-color: rgb(63 62 62 / 40%);
  text-align: center;
  left: 2%;
  z-index: 100;

  .text {
    display: block;
    color: #fff;
    font-size: 16px;
    margin-top: 6%;
  }

  .data {
    color: #fff;
    display: block;
    font-size: 25px;
  }

  .top-left-img {
    transform: rotate(90deg);
    position: absolute;
    left: 5px;
    top: 5px;
  }

  .bottom-right-img {
    transform: rotate(-90deg);
    position: absolute;
    right: 5px;
    bottom: 5px;
  }
}

.chart-size {
  width: 100%;
  height: 80%;
}

.info-box {
  float: right;
  margin: 10px;
}

.table-form .el-form-item {
  margin-bottom: 0;
}

.tree-sel .vue-treeselect__control {
  line-height: 24px;
  margin-top: 4px;
  border-radius: 4px;
  height: 24px;
}

.tree-sel .vue-treeselect__placeholder,
.tree-sel .vue-treeselect__single-value {
  line-height: 24px;

}

</style>
